<template>
    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
        <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
        </el-tab-pane>
    </el-tabs>
</template>


<script>
export default {
    // data() {
    //     // return {
    //     //     // editableTabsValue: this.$store.state.menu.editableTabsValue,
    //     //     // editableTabs: this.$store.state.menu.editableTabs,
    //     //     tabIndex: 2
    //     // }
    // },
    methods: {
        removeTab(targetName) {
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (targetName === 'Index') {
                return
            }
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }

            this.editableTabsValue = activeName;
            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            this.$router.push({ name: activeName })
        },
        clickTab(target) {
            this.$router.push({ name: target.name})
        }
    },
    computed: {
        editableTabsValue: {
            get() { 
                return this.$store.state.menu.editableTabsValue
            },
            set(val) { 
                this.$store.state.menu.editableTabsValue=val
            }
        },
        editableTabs: {
            get() {
                return this.$store.state.menu.editableTabs
            },
            set(val) {
                this.$store.state.menu.editableTabs = val
            }
        }
    }
}

</script>

<style scoped>

</style>